

<template>
<div class="teleport-index">
  <h2>准备些一个弹框：modal。要居中显示。默认我们使用fixed定位也可以的啊。但是如果我们用了filter的css属性，发现不行了。</h2>

  <div>
    <div>父组件：</div>

    <div>
      <img class="dog-img" src="https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg" alt="">
    </div>

    <div>
      <el-button type="primary" @click="handleShowModal">显示弹框</el-button>
      <el-button type="primary" @click="handleShowModal2">显示弹框2(teleport)</el-button>
    </div>

    <Modal v-if="isShow" @close="handleClose"> </Modal>

    <teleport to="body">
    <!--<teleport to=".app-main">-->
      <Modal v-if="isShow2" @close="handleClose2"> </Modal>
    </teleport>
  </div>
</div>
</template>
<script setup lang="ts">
import Modal from '@views/basic/teleport/components/Modal.vue'

const isShow = ref(false)
const isShow2 = ref(false)
const handleShowModal = ()=>{
  isShow.value = !isShow.value
}

const handleShowModal2 = ()=>{
  isShow2.value = !isShow2.value
}
const handleClose = ()=>{
  isShow.value = false
}

const handleClose2 = ()=>{
  isShow2.value = false
}
</script>
<style scoped>
.teleport-index {
  width: 800px;
  height: 400px;
  background: #dddddd;

   /*有了这个属性后，fixed定位就会失效了。*/
  filter:saturate(200%);
}
.dog-img {
  width: 200px;

}
</style>
